@import url('base.css');

body {
  background-color: #202020;
}

.passport-section {
  position: relative;
  height: 50%;
  width: 50%;

  .main, .components {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .main {

    #pass {
      -webkit-transition: all .5s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    .bump {      
      -webkit-transform: scale(.9);
    }
  }

  img {
    height: auto;
    width: 100%;
    -webkit-transition: all .8s;
  }

  .wrapper {
    padding-top: 5%;
    position: relative;
    width: 20%;
  }

  #phoenix_wrapper {
    left: 20%;
  }

  #houston_wrapper {
    left: 60%;
  }
}

@-webkit-keyframes bump {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}